<template>
  <div class="description_text">
    <div v-if="title" class="title">{{ title }}</div>
    <el-row :gutter="gutter">
      <el-col v-for="(item, key) in dataSource" :key="key" :span="+col">
        <div class="term">{{ item.term }}</div>
        <div class="detail">{{ item.detail }}</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const handleArrayObj = data => {
  return data
    .filter(item => item.tag === 'Description')
    .map(item => ({
      tag: item.tag,
      term: (item.data && item.data.attrs.term) || '暂无',
      detail: (item.children && item.children[0].text) || '暂无'
    }))
}
export default {
  name: 'Description',
  props: {
    title: {
      type: String,
      default: ''
    },
    content: {
      type: [Object, Array],
      default: () => ([])
    },
    gutter: {
      type: [Number, String],
      default: 20
    },
    col: {
      type: [Number, String],
      default: 8
    }
  },
  data() {
    return {
      dataSource: handleArrayObj(this.$slots.default || [])
    }
  },
  watch: {
    content() {
      this.dataSource = handleArrayObj(this.$slots.default || [])
    }
  },
  created() {
  }
}
</script>

<style lang="less" scoped>
.description_text {
  .title {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 8px;
    color: rgba(0, 0, 0, 0.85);
  }
  .term {
    color: rgba(0,0,0,.85);
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    padding-bottom: 8px;
    margin-right: 8px;
    white-space: nowrap;
    display: table-cell;
    &:after {
      content: ":";
      margin: 0 8px 0 2px;
      position: relative;
      top: -0.5px;
    }
  }
  .detail {
    padding-right: 10px;
    font-size: 13px;
    line-height: 1.5;
    width: 100%;
    padding-bottom: 8px;
    color: rgba(0, 0, 0, 0.65);
    display: table-cell;
    text-align: left;
  }
}
</style>
